<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伊蕾娜图片 - 伊蕾娜</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#FF75A0',
            secondary: '#FFD6E0',
            accent: '#B388EB',
            dark: '#2A2F4F',
            light: '#FDEFF4'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
      }
      .text-shadow-lg {
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      .animate-pulse-slow {
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      .bg-gradient-hero {
        background: linear-gradient(135deg, #FF75A0 0%, #B388EB 100%);
      }
      .gallery-img {
        transition: transform 0.5s ease, box-shadow 0.5s ease;
      }
      .gallery-img:hover {
        transform: scale(1.03);
      }
      .img-fade {
        animation: fadeIn 0.8s ease-in-out;
      }
      /* 添加移动端菜单显示样式 */
      .mobile-menu-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }
    }

    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-15px); }
      100% { transform: translateY(0px); }
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
    style>
        /* 模态框样式 */
        #image-modal {
            display: none;
        }
        #modal-close:hover {
            color: #ffd700;
            transition: color 0.3s ease;
        }
        /* 移除以下模态框样式 */
        /* #image-modal {
            display: none;
        }
        #modal-close:hover {
            color: #ffd700;
            transition: color 0.3s ease;
        } */
    </style>

</head>
<body class="bg-light text-dark min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-heart text-primary text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">伊蕾娜</h1>
      </div>
      <div class="hidden md:flex items-center space-x-6">
        <a href="index.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium">首页</a>
        <a href="about.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium">关于伊蕾娜</a>
        <a href="gallery.html" class="text-primary font-medium">图片</a>
        <a href="message.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium">留言板</a>
        <a href="index.html#share" class="text-dark hover:text-primary transition-colors duration-200 font-medium">分享</a>
      </div>
      <button class="md:hidden text-dark text-xl" id="mobile-menu-button">
        <i class="fa fa-bars"></i>
      </button>
    </div>
    <!-- 移动端菜单容器 -->
    <div id="mobile-menu" class="md:hidden bg-white shadow-lg absolute w-full left-0 top-full transform -translate-y-full opacity-0 transition-all duration-300 pointer-events-none">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <a href="index.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium py-2 border-b border-gray-100">首页</a>
        <a href="about.html" class="text-dark hover:text-primary transition-colors duration-200 font-medium py-2 border-b border-gray-100">关于伊蕾娜</a>
        <a href="gallery.html" class="text-primary font-medium py-2 border-b border-gray-100">图片</a>
        <a href="index.html#share" class="text-dark hover:text-primary transition-colors duration-200 font-medium py-2">分享</a>
      </div>
    </div>
  </nav>

  <!-- 主内容 -->
  <main class="flex-grow py-16 bg-white">
    <div class="container mx-auto px-4">
      <div class="text-center mb-12">
        <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">伊蕾娜图片</h2>
        <p class="text-dark/70 max-w-2xl mx-auto"></p>
        <div class="w-20 h-1 bg-primary mx-auto rounded-full mt-6"></div>
      </div>

      <!-- 图片画廊 -->
      <div class="max-w-5xl mx-auto">
        <!-- 主图片显示区 -->
        <div class="relative mb-8 bg-light rounded-2xl overflow-hidden shadow-lg">
          <div class="aspect-w-16 aspect-h-9 bg-gray-100">
            <img id="main-image" src="https://-webpic-qc.xhscdn.com/202507192217/2d662a1843b2a06c5642595141a9960a/1040g2sg31c93256jh0d05njgdpu08uo8gm0324o!nd_dft_wgth_webp_3" alt="伊蕾娜的旅程" class="">
          </div>
          <div id="image-caption" class="absolute bottom-0 left-0 right-0 bg-dark/70 text-white p-4 text-center">
            伊蕾娜在夕阳下的旅程
          </div>
          <!-- 导航按钮 -->
          <button id="prev-btn" class="absolute left-4 top-1/2 -translate-y-1/2 bg-white/30 hover:bg-white/50 text-white w-12 h-12 rounded-full flex items-center justify-center backdrop-blur-sm transition-all">
            <i class="fa fa-chevron-left text-xl"></i>
          </button>
          <button id="next-btn" class="absolute right-4 top-1/2 -translate-y-1/2 bg-white/30 hover:bg-white/50 text-white w-12 h-12 rounded-full flex items-center justify-center backdrop-blur-sm transition-all">
            <i class="fa fa-chevron-right text-xl"></i>
          </button>
        </div>

        <!-- 缩略图导航 -->
        <div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-3" id="thumbnails-container">
          <div class="thumbnail-item gallery-img cursor-pointer rounded-lg overflow-hidden shadow-md border-2 border-primary" data-img="https://pan.tenire.com/view.php/d4afb515b8803e2e40e7a3bebdc5cc2a.webp" data-caption="伊蕾娜在夕阳下的旅程">
            <img src="https://pan.tenire.com/view.php/d4afb515b8803e2e40e7a3bebdc5cc2a.webp" alt="缩略图" class="">
          </div>
          <div class="thumbnail-item gallery-img cursor-pointer rounded-lg overflow-hidden shadow-md border-2 border-transparent hover:border-primary/50 transition-all" data-img="https://pan.tenire.com/view.php/ffdc14473390d8b2bc79faa650eb76a3.webp" data-caption="灰之魔女">
            <img src="https://pan.tenire.com/view.php/ffdc14473390d8b2bc79faa650eb76a3.webp" alt="缩略图" class="w-full h-20 object-cover">
          </div>
          <div class="thumbnail-item gallery-img cursor-pointer rounded-lg overflow-hidden shadow-md border-2 border-transparent hover:border-primary/50 transition-all" data-img="https://p3-search.byteimg.com/obj/tos-cn-i-qvj2lq49k0/f24589b1145d4528800f695eed3420c3" data-caption="旅行中的伊蕾娜">
            <img src="https://p3-search.byteimg.com/obj/tos-cn-i-qvj2lq49k0/f24589b1145d4528800f695eed3420c3" alt="缩略图" class="w-full h-20 object-cover">
          </div>
          <div class="thumbnail-item gallery-img cursor-pointer rounded-lg overflow-hidden shadow-md border-2 border-transparent hover:border-primary/50 transition-all" data-img="https://pan.tenire.com/view.php/657c5b00de2804f6d678954ab2626088.webp" data-caption="伊蕾娜">
            <img src="https://pan.tenire.com/view.php/657c5b00de2804f6d678954ab2626088.webp" alt="缩略图" class="w-full h-20 object-cover">
          </div>
          <div class="thumbnail-item gallery-img cursor-pointer rounded-lg overflow-hidden shadow-md border-2 border-transparent hover:border-primary/50 transition-all" data-img="https://pan.tenire.com/view.php/d6964bffa6fa936ec3eb3a37b1a27be5.webp" data-caption="伊蕾娜">
            <img src="https://pan.tenire.com/view.php/d6964bffa6fa936ec3eb3a37b1a27be5.webp" alt="缩略图" class="w-full h-20 object-cover">
          </div>
          <div class="thumbnail-item gallery-img cursor-pointer rounded-lg overflow-hidden shadow-md border-2 border-transparent hover:border-primary/50 transition-all" data-img="https://pan.tenire.com/down.php/ea3ab15f2ac5c87fb7a001bd0fd08349.webp" data-caption="伊蕾娜与风景">
            <img src="https://pan.tenire.com/down.php/ea3ab15f2ac5c87fb7a001bd0fd08349.webp" alt="缩略图" class="w-full h-20 object-cover">
          </div>
          <div class="thumbnail-item gallery-img cursor-pointer rounded-lg overflow-hidden shadow-md border-2 border-transparent hover:border-primary/50 transition-all" data-img="https://pan.tenire.com/view.php/bea98df41eba1c48d410a13717244c9a.webp" data-caption="伊蕾娜">
            <img src="https://pan.tenire.com/view.php/bea98df41eba1c48d410a13717244c9a.webp" alt="缩略图" class="w-full h-20 object-cover">
          </div>
          <div class="thumbnail-item gallery-img cursor-pointer rounded-lg overflow-hidden shadow-md border-2 border-transparent hover:border-primary/50 transition-all" data-img="https://pan.tenire.com/view.php/e9446838bf3358759f0b484448c42cfd.webp" data-caption="微笑的伊蕾娜">
            <img src="https://pan.tenire.com/view.php/e9446838bf3358759f0b484448c42cfd.webp" alt="缩略图" class="w-full h-20 object-cover">
          </div>
        </div>

        <!-- 图片计数器 -->
        <div class="text-center mt-8">
          <p class="text-dark/70" id="image-counter">图片 1 / 8</p>
        </div>
      </div>
    </div>
    <!-- 关闭gallery-container -->
    
    <!-- 移除以下模态框HTML -->
    <!-- <div id="image-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden items-center justify-center">
        <span id="modal-close" class="absolute top-4 right-6 text-white text-4xl cursor-pointer">&times;</span>
        <img id="modal-image" class="max-w-[90vw] max-h-[80vh] object-contain" src="" alt="大图查看">
        <div id="modal-caption" class="absolute bottom-6 text-white text-center w-full"></div>
    </div> -->
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-10">
    <div class="container mx-auto px-4">
      <div class="text-center">
        
        <p class="text-white/70">&copy; 2023 伊蕾娜 | 基于《魔女之旅》创作</p>
      </div>
    </div>
  </footer>

  <!-- 画廊功能脚本 -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // 获取DOM元素
      const mainImage = document.getElementById('main-image');
      const imageCaption = document.getElementById('image-caption');
      const prevBtn = document.getElementById('prev-btn');
      const nextBtn = document.getElementById('next-btn');
      const thumbnails = document.querySelectorAll('.thumbnail-item');
      const imageCounter = document.getElementById('image-counter');
      let currentIndex = 0;

      // 更新主图片和计数器
      function updateGallery(index) {
        // 移除所有缩略图的选中状态
        thumbnails.forEach(thumb => {
          thumb.classList.remove('border-primary');
          thumb.classList.add('border-transparent');
        });

        // 设置当前缩略图为选中状态
        thumbnails[index].classList.remove('border-transparent');
        thumbnails[index].classList.add('border-primary');

        // 更新主图片和标题
        mainImage.classList.remove('img-fade');
        void mainImage.offsetWidth; // 触发重排
        mainImage.src = thumbnails[index].dataset.img;
        imageCaption.textContent = thumbnails[index].dataset.caption;
        mainImage.classList.add('img-fade');



        // 新增模态框显示逻辑
        // 移除以下模态框相关JavaScript
        /* const modal = document.getElementById('image-modal');
        const modalImg = document.getElementById('modal-image');
        const modalCaption = document.getElementById('modal-caption');
        const modalClose = document.getElementById('modal-close');

        modalImg.src = thumbnails[index].dataset.img;
        modalCaption.textContent = thumbnails[index].dataset.caption;
        modal.style.display = 'flex';

        // 点击关闭按钮隐藏模态框
        modalClose.onclick = function() {
            modal.style.display = 'none';
        }

        // 点击模态框背景隐藏模态框
        modal.onclick = function(e) {
            if (e.target === modal) {
                modal.style.display = 'none';
            }
        } */

        // 更新计数器
        imageCounter.textContent = `图片 ${index + 1} / ${thumbnails.length}`;

        currentIndex = index;
      }

      // 上一张图片
      function prevImage() {
        currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;
        updateGallery(currentIndex);
      }

      // 下一张图片
      function nextImage() {
        currentIndex = (currentIndex + 1) % thumbnails.length;
        updateGallery(currentIndex);
      }

      // 缩略图点击事件
      thumbnails.forEach((thumb, index) => {
        thumb.addEventListener('click', () => {
          updateGallery(index);
        });
      });

      // 移除初始调用，避免替换原始图片
      // updateGallery(0); // 注释掉这行
      // 按钮点击事件
      prevBtn.addEventListener('click', prevImage);
      nextBtn.addEventListener('click', nextImage);

      // 键盘导航
      document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft') prevImage();
        if (e.key === 'ArrowRight') nextImage();
      });

      // 初始化计数器
      updateGallery(0);
    });
  </script>
  
  <!-- 添加移动端菜单脚本 -->
  <script>
    // 移动端菜单切换
    const menuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    
    if (menuButton && mobileMenu) {
      menuButton.addEventListener('click', () => {
        mobileMenu.classList.toggle('mobile-menu-visible');
        // 切换图标
        const icon = menuButton.querySelector('i');
        if (mobileMenu.classList.contains('mobile-menu-visible')) {
          icon.classList.remove('fa-bars');
          icon.classList.add('fa-times');
        } else {
          icon.classList.remove('fa-times');
          icon.classList.add('fa-bars');
        }
      });
    
      // 点击菜单项后关闭菜单
      const menuItems = mobileMenu.querySelectorAll('a');
      menuItems.forEach(item => {
        item.addEventListener('click', () => {
          mobileMenu.classList.remove('mobile-menu-visible');
          const icon = menuButton.querySelector('i');
          icon.classList.remove('fa-times');
          icon.classList.add('fa-bars');
        });
      });
    }
  </script>
</body>
</html>